<template>
	<view>
		<uni-popup ref="popup" :safe-area="false">
			<view class="bottom-popup">
				<view class="popup-title d-flex psr a-center j-center">
					<view class="text-title">热量差</view>
					<image @tap="closePopup" class="title-icon" src="@/static/image/close.png"></image>
				</view>
				<view class="popup-row">
					<view class="picker-divider"></view>
					<picker-view indicator-style="height: 70rpx;background: #F5F5F5;z-index: 0;" :value="value" @change="bindChange" class="picker-view">
						<picker-view-column>
							<view class="d-flex j-end" v-for="(item,index) in caloriesMin" :key="index">
								<view class="item item-left" :style="`${value[0]==index?select:noSelect}`" >{{item}}</view>
								<text class="item item-unit" style="padding-right: 20rpx;" :style="{color: value[0]==index?'#1DC691':'#333333'}">千卡</text>
							</view>
						</picker-view-column>
						<picker-view-column>
							<view class="d-flex" v-for="(item,index) in caloriesMax" :key="index">
								<view class="item item-right" :style="`${value[1]==index?select:noSelect}`" >{{item}}</view>
								<text class="item item-unit" :style="{color: value[1]==index?'#1DC691':'#333333'}">千卡</text>
							</view>
						</picker-view-column>
					</picker-view>
				</view>
				<view class="popup-button d-flex j-center">
					<tm-button _style="margin:0 auto 0 auto;font-weight: 600;" round="5" :width="650" :shadow="-1"
					    :linear-color="['#64F1C5', '#29DBA3']" linear="left" :fontSize="32" fontColor="#FFFFFF" @tap="determine"
					    label="确定"></tm-button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script setup lang="ts">
import { ref, defineEmits } from "vue";

const select ="font-size: 40rpx;color:#1DC691"
const noSelect ="font-size: 30rpx;color:#333333"
const caloriesMin:any = ref([]);
const caloriesMax:any = ref([]);
//初始化选择组件
for (let i = 0; i <= 139; i++) {
	caloriesMin.value.push(100 + (i*10))
}

const value = ref()
const popup = ref()
const showPopup = (initialCalorie:string) => {
	
	popup.value.open("bottom")
	if(initialCalorie==null||initialCalorie==""){
		initialCalorie = "350-400";//初始值
	}
	//初始默认值
	let list = initialCalorie.split("-");
	let calorieMinIndex = caloriesMin.value.indexOf(Number(list[0]));
	countMax(Number(list[0]));
	let calorieMaxIndex = caloriesMax.value.indexOf(Number(list[1]));
	value.value = [calorieMinIndex,calorieMaxIndex];
	
}
//根据左侧值计算右侧列表
const countMax = (min:number) => {
	caloriesMax.value = [];
	//console.log(min)
	let max = (1500 - min) / 10;
	for (let i = 0; i <= max; i++) {
		caloriesMax.value.push(min + (i*10))
	}
	
}
const closePopup = () => {
	popup.value.close()
}

const bindChange = (e:any) => {
	let oidMax = caloriesMax.value[value.value[1]];
	const val = e.detail.value;
	if(value.value[0] != val[0]){
		let min = caloriesMin.value[val[0]];
		countMax(min);
		let calorieMaxIndex = caloriesMax.value.indexOf(oidMax);
		if(calorieMaxIndex==-1)calorieMaxIndex = 0;
		val[1] = calorieMaxIndex;
	}
	value.value = val;
}
//确定选择并给父页面传值
const emit = defineEmits(["onGetCalorie"])
const determine = () => {
	emit("onGetCalorie", caloriesMin.value[value.value[0]]+"-"+caloriesMax.value[value.value[1]]);
	closePopup();//关闭
}
defineExpose({
  showPopup,
  closePopup
});
</script>
<style lang="scss" scoped>

.bottom-popup{
	padding-bottom: 60rpx;
	background: #FFFFFF;
	border-radius: 20rpx 20rpx 0rpx 0rpx;
	.popup-title{
		height: 100rpx;
		border-bottom: 1rpx solid #E4E4E4;
		.title-text{
			position:absolute;
			top:34rpx;
			left:50rpx;
			height: 32rpx;
			width: 234rpx;
		}
		.title-icon{
			position:absolute;
			top:32rpx;
			right: 30rpx;
			
			width: 36rpx;
			height: 36rpx;
		}
	}
	.popup-show{
		justify-content: space-between;
		height: 80rpx;
		padding: 0 30rpx 0 30rpx;
		.show-text{
			font-size: 32rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
	}
	.popup-row{
		position: relative;
		.picker-divider{
			width: 20rpx;
			height: 2rpx;
			background: rgb(29, 198, 145);
			
			position:absolute;
			top:50%;
			left: 50%;
			z-index:10;
			transform: translate(-50%, -50%);
		}
		.picker-view {
			height: 400rpx;
		}
		.item {
			line-height: 70rpx;
			text-align: center;
			
			font-size: 34rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			
		}
		.item-left{
			text-align:right;
		}
		.item-right{
			text-align: left;
			padding-left: 31rpx;
		}
		.item-unit{
			padding-left: 4rpx;
			padding-top: 3rpx;
			
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
		}
	}
}
</style>